<template>
  <div class="g-mobile">
    <div class="mobile-tit">{{wechatDetail.nickName}}</div>
    <div class="mobile-ft">
      <draggable ref="drag" v-model="menus" element="ul" class="menu-list cl" :size="menus.length" :move="handleMoveMenu">
        <li v-for="item,n in menus" :class="{'menu-item': true, 'focus': showMenu===n}">
          <div @click="handleMenuClick(n, item)">{{item.name}}</div>
          <draggable v-model="item['sub_button']" class="sub-menu" element="ul" :move="handleMoveSubMenu">
            <li v-for="sub,n in item['sub_button']" :class="{'focus': showSubMenu===n}" @click="handleSubMenuClick(n, sub)">
              <span>{{sub.name}}</span>
            </li>
            <li v-if="item['sub_button'].length<5" class="addMenu" @click="handleAddSubMenu(n)"><span><i class="icon icon-jiahao"></i></span></li>
          </draggable>
        </li>
        <li v-if="menus.length!==3" class="addMenu" @click="handleAddMenu">  <i class="icon icon-jiahao"></i>
        </li>
      </draggable>
    </div>
  </div>
</template>
<script>
  import {mapState, mapMutations, mapActions} from 'vuex'
  import draggable from 'vuedraggable'
  export default {
    components: {draggable},
    data () {
      return {
        showMenu: null,
        showSubMenu: null
      }
    },
    mounted () {
      const appid = this.$route.params.appid
      this.getWechatInfo(appid)
    },
    props: ['inputname', 'nameshow'],
    computed: {
      ...mapState({
        wechatDetail: state => state.wechatManage.wechatDetail
      }),
      menus: {
        get () {
          return this.$store.state.wechatManage.wechatMenu
        },
        set (value) {
          this.SET_WECHAT_MENU(value)
        }
      }
    },
    methods: {
      ...mapActions(['getWechatInfo']),
      ...mapMutations(['SET_MENU_INDEX', 'SET_SUB_MENU_INDEX', 'SET_CUR_MENU', 'SET_WECHAT_MENU']),
      // 切换菜单校验菜单名为空
      checkNameEmpty () {
        if (this.nameshow && this.inputname === '') {
          this.$message.warning('菜单名称不能为空')
          return false
        }
        return true
      },
      // 选择菜单
      handleMenuClick (index, menu) {
        if (!this.checkNameEmpty()) return
        this.showMenu = index
        this.showSubMenu = null
        this.SET_MENU_INDEX(index)
        this.SET_SUB_MENU_INDEX(null)
        this.SET_CUR_MENU(menu)
        this.$emit('selectMenu', menu.key === '4' ? 'new' : '')
      },
      // 选择子菜单
      handleSubMenuClick (index, menu) {
        if (!this.checkNameEmpty()) return
        this.showSubMenu = index
        this.SET_SUB_MENU_INDEX(index)
        this.SET_CUR_MENU(menu)
        this.$emit('selectMenu', menu.key === '4' ? 'new' : '')
      },
      // 添加菜单
      handleAddMenu () {
        if (!this.checkNameEmpty()) return
        this.menus.push({ name: '菜单名称', type: 'media_id', key: '4', sub_button: [] })
        this.menus = this.menus
        this.handleMenuClick(this.menus.length - 1, { name: '菜单名称', type: 'media_id', key: '4', sub_button: [] })
      },
      // 添加子菜单
      handleAddSubMenu (i) {
        if (!this.checkNameEmpty()) return
        this.menus[i].sub_button.push({name: '子菜单名称', type: 'media_id', key: '4', sub_button: [], url: null})
        this.menus = this.menus
        this.handleSubMenuClick(this.menus[i].sub_button.length - 1, {
          key: '4',
          media_id: '',
          name: '子菜单名称',
          sub_button: [],
          type: 'media_id',
          url: null
        })
      },
      // 移动子菜单
      handleMoveSubMenu () {
        this.$store.commit('SET_WECHAT_MENU', this.$refs.drag.value)
      },
      // 移动菜单
      handleMoveMenu () {
        this.showMenu = null
      }
    }
  }
</script>
<style lang="scss">
  .g-mobile{
    position: relative;
    width: 317px;
    height: 580px;
    background: transparent url(../../../assets/bg/bg_mobile_head.png) no-repeat 0 0;
    background-position: 0 0;
    border: 1px solid #e7e7eb;
    .mobile-tit{margin-top:30px;color: #fff;text-align: center;font-size: 16px;}
    .mobile-ft{position: absolute;bottom: 0;left: 0;right: 0;padding-left: 43px;height:50px;border-top: 1px solid #e7e7eb;background: transparent url(../../../assets/bg/bg_mobile_foot.png) no-repeat 0 0;}
    .menu-list{width:100%;list-style:none;}
    .menu-item,.addMenu{position:relative;float:left;height:50px;border-right:1px solid #e7e7eb;line-height:50px;text-align:center;box-sizing:border-box;cursor:pointer;}
    .menu-item:last-child,.addMenu{border-right:0}
    [size='0']>li{width:100%;}
    [size='1']>li{width:50%;}
    [size='2']>li{width:33.33%;}
    [size='3']>li{width:33.33%;}
    .sub-menu{
      display:none;position:absolute;bottom:65px;width:110%;left:-5%;background:#fafafa;border:1px solid #e7e7eb;list-style:none;
      li{position:relative;float:none;height:50px;line-height:20px;border-bottom: 1px solid #e7e7eb;text-align:center;}
      li:last-child{border:0;}
      li span{position:absolute;left:0;top:50%;width:100%;transform:translateY(-50%)}
      .focus{background:#fff;outline: 1px solid #44b549;}
      &:before{content:'';position:absolute;bottom:-16px;left:50%;margin-left:-8px;border:8px solid transparent;border-top-color:#e7e7eb}
      &:after{content:'';position:absolute;bottom:-14px;left:50%;margin-left:-8px;border:8px solid transparent;border-top-color:#fafafa}
    }
    .menu-item.focus .sub-menu{display:block;}
    .menu-item.focus{background:#fff;outline: 1px solid #44b549;}
  }
</style>
